<template>
  <div class="effect" :class="{ active: isStart, out: !isStart }">
    <div class="inner" ref="triggerDom">
      <h2>为什么使用<span>云译通</span>可以达到以上效果？</h2>
      <div class="effect-content">
        <ul class="left" :class="{ enter: isStart }">
          <li v-for="item in effectList" :key="item.name">
            <effect-count :count="item.count" :content="item.unit" :playing="isStart" />
            <span>{{ item.name }}</span>
          </li>
        </ul>
        <ul class="right" :class="{ enter: isStart }">
          <li :class="{ active: currentContent === 1 }" @mouseenter="handleMouseEnter(1)" @mouseleave="play">
            <div class="inner">
              <div class="icon">
                <img src="../../assets/images/home/effect01.svg" alt="effect" />
              </div>
              <div class="content">
                <h3>私有云+双密钥，保护数据安全</h3>
                <p>
                  基于私有云+双密钥保护安全模型，分布式安全计算架构，最大程度保障数据机密性与完整性，实现“数据可用不可见”的安全体验
                </p>
              </div>
            </div>
          </li>
          <li :class="{ active: currentContent === 2 }" @mouseenter="handleMouseEnter(2)" @mouseleave="play">
            <div class="inner">
              <div class="icon">
                <img src="../../assets/images/home/effect02.svg" alt="effect" />
              </div>
              <div class="content">
                <h3>ESonSeq算法引擎</h3>
                <p>
                  基于私有云+双密钥保护安全模型，分布式安全计算架构，最大程度保障数据机密性与完整性，实现“数据可用不可见”的安全体验
                </p>
              </div>
            </div>
          </li>
          <li :class="{ active: currentContent === 3 }" @mouseenter="handleMouseEnter(3)" @mouseleave="play">
            <div class="inner">
              <div class="icon">
                <img src="../../assets/images/home/effect03.svg" alt="effect" />
              </div>
              <div class="content">
                <h3>保留原文排版</h3>
                <p>
                  基于私有云+双密钥保护安全模型，分布式安全计算架构，最大程度保障数据机密性与完整性，实现“数据可用不可见”的安全体验
                </p>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import EffectCount from '@/base/effectCount.vue'
import { onMounted, reactive, ref } from 'vue'
import { requireUrl } from '@/utils'
import { useScroll } from '@/hooks'

const currentContent = ref<number>(1)
const contentTimer = ref<ReturnType<typeof setTimeout>>()
const effectList = reactive<{ name: string; unit: string; count: number }[]>([
  { name: '文档格式处理', unit: '种', count: 40 },
  { name: '语言互译', unit: '种', count: 38 },
  { name: '细分领域', unit: '+', count: 50 },
  { name: '语言大数据支持', unit: '亿', count: 4000 }
])
const effectContent = reactive([
  {
    id: 1,
    name: '私有云+双密钥，保护数据安全',
    icon: requireUrl('../../src/assets/images/home/effect01.svg'),
    content:
      '基于私有云+双密钥保护安全模型，分布式安全计算架构，最大程度保障数据机密性与完整性，实现“数据可用不可见”的安全体验'
  },
  {
    id: 2,
    name: 'ESonSeq算法引擎',
    icon: requireUrl('../../src/assets/images/home/effect02.svg'),
    content:
      '基于私有云+双密钥保护安全模型，分布式安全计算架构，最大程度保障数据机密性与完整性，实现“数据可用不可见”的安全体验'
  },
  {
    id: 3,
    name: '保留原文排版',
    icon: requireUrl('../../src/assets/images/home/effect03.svg'),
    content:
      '基于私有云+双密钥保护安全模型，分布式安全计算架构，最大程度保障数据机密性与完整性，实现“数据可用不可见”的安全体验'
  }
])

const { triggerDom, isStart } = useScroll()

const play = () => {
  contentTimer.value && clearTimeout(contentTimer.value)
  contentTimer.value = setTimeout(() => {
    currentContent.value++
    if (currentContent.value > effectContent.length) currentContent.value = 1
    play()
  }, 3000)
}

const handleMouseEnter = (id: number) => {
  contentTimer.value && clearTimeout(contentTimer.value)
  currentContent.value = id
}

onMounted(() => {
  play()
})
</script>

<style scoped lang="scss">
@import '@/assets/scss/base.scss';

@keyframes count-enter {
  to {
    opacity: 1;
  }
}

.effect {
  padding-top: 222px;
  padding-bottom: 120px;

  &.active {
    h2,
    .effect-content > .right li {
      transition: all 1s $cubic;
      transform: translateY(0);
      opacity: 1;
    }

    .effect-content > .right li {
      @for $i from 1 through 3 {
        &:nth-of-type(#{$i}) {
          transition: all 1s 0.3s * $i $cubic;
        }
      }
    }
  }

  &.out {
    h2,
    .effect-content > .right li {
      transition: all 1s $cubic;
      transform: translateY(40px);
      opacity: 0;
    }

    .effect-content > .right li {
      @for $i from 1 through 3 {
        &:nth-of-type(#{$i}) {
          transition: all 1s 0.3s * (3 - $i) $cubic;
        }
      }
    }
  }

  h2 {
    text-align: center;
    height: 48px;
    font-size: 48px;
    font-weight: bold;
    color: #324153;
    margin-bottom: 82px;
    transform: translateY(40px);
    opacity: 0;
    position: relative;
    z-index: 1000;

    > span {
      color: #1f86ff;
    }
  }

  .effect-content {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 550px;

    > .left {
      width: 300px * 2;
      min-width: 300px * 2;
      margin-right: 80px;
      font-size: 28px;
      color: #324153;
      display: flex;
      flex-wrap: wrap;
      transition: all 0.5s;
      background: url('@/assets/images/home/ear.gif') no-repeat center center;
      background-size: contain;

      &.enter {
        > li {
          opacity: 1;
        }
      }

      > li {
        font-weight: normal;
        width: 300px;
        min-width: 300px;
        box-sizing: border-box;
        margin-bottom: 132px;
        opacity: 0;
        transition: all 0.5s;

        &:nth-of-type(3),
        &:nth-of-type(4) {
          margin-bottom: 0;
        }

        &:nth-of-type(2),
        &:nth-of-type(4) {
          margin-right: 0;
        }

        > span {
          font-weight: normal;
        }
      }
    }

    > .right {
      width: 620px;

      &.enter {
        > li {
          opacity: 1;
        }
      }

      > li {
        width: 100%;
        margin-bottom: 40px;
        opacity: 0;

        &.active {
          .inner {
            box-shadow: 35px 43px 68px 0 rgba(168, 188, 217, 0.19);

            > .icon img {
              transform: scale(1.2);
            }

            > .content {
              > h3 {
                font-size: 28px;
                margin-bottom: 10px;
              }

              > p {
                display: inline-block;
              }
            }
          }
        }

        .inner {
          padding: 20px 20px;
          box-sizing: border-box;
          border-radius: 26px;
          width: 100%;
          max-height: 177px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          transition: all 1s $cubic;

          > .icon {
            min-width: 96px;
            width: 96px;
            transform-origin: center center;
            transition: all 1s;

            img {
              width: 60px;
              object-fit: contain;
            }
          }

          > .content {
            min-width: 484px;

            > h3 {
              font-size: 34px;
              font-weight: 700;
              color: #324153;
              transition: margin-bottom 0.5s $cubic;
            }

            > p {
              font-weight: normal;
              display: none;
              font-size: 18px;
              color: #6c7e94;
              line-height: 30px;
            }
          }
        }
      }
    }
  }
}
</style>
